<header class="header-container" ng-include="'/partials/header.html'"></header>
<div class="middle-container container-fluid wiki">
    <div class="row-fluid" ng-show="!formOpened">
        <div class="span12">
            <div class="wiki-container" ng-bind-html="page.html"></div>
            <div class="attachments" ng-show="attachments.length > 0 || newAttachments[0].status != undefined">
                <h3 data-icon="E" i18next="wiki.attachments">Attachments</h3>
                <ul class="attachments-items">
                    <li class="attachments-item" ng-repeat="attachment in attachments">
                        <a href="{{ attachment.url }}" target="_blank">{{ attachment.name }}</a>
                        <span>[{{ attachment.size|sizeFormat }}]</span>
                        <span>{{ "wiki.on-date"|i18next:{date:momentFormat(attachment.created_date, 'LLLL')} }}</span>
                    </li>
                </ul>
                <ul class="attachments-items in-progress">
                    <li class="attachments-item" ng-repeat="attachment in newAttachments">
                        <div ng-show="attachment.status != undefined">
                            <span ng-show="attachment.status == 'done'"
                                  class="status done" data-icon="z"></span>
                            <span ng-show="attachment.status == 'in-progress'"
                                  class="status in-progress spinner"></span>
                            <span ng-show="attachment.status == 'error'"
                                  class="status error" data-icon="o"></span>
                            <div class="progress-bar">
                                <span style="width: {{ attachment.uploadPercent }}%;">
                                    {{ attachment.uploadPercent }} %
                                </span>
                            </div>
                            <span class="progress-data">({{ attachment.progressSizeData }})</span>
                            <span class="name">{{ attachment.name }}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="wiki-buttons">
                <a href="" class="button button-edit" ng-click="ctrl.openEditForm()"
                    i18next="wiki.edit-button" >Edit</a>
                <a href="{{ urls.wikiHistoricalUrl(projectSlug, slug) }}" class="button button-historical"
                    i18next="wiki.historical-button">Historical</a>
                <a href="" class="button button-delete" ng-click="ctrl.deletePage()"
                   i18next="wiki.delete-button">Delete</a>
            </div>
        </div>
    </div>
    <div class="row-fluid" ng-show="formOpened">
        <div class="span12">
            <div class="wikiform-container">
                <textarea id="wiki" name="content" ng-model="content"
                          gm-markitup preview-id="preview"></textarea>
                <div id="preview" class="preview"></div>
            </div>
            <a class="add-attachment" data-icon="E" title="Add Attachments" href=""
               gm-forward-click="#attachment_file_input"
               i18next="wiki.add-attachments,title:wiki.add-attachments">Add Attachments</a>
            <ul class="attachments-items">
                <li class="attachments-item" ng-repeat="attachment in newAttachments">
                    <a class="delete" data-icon="h" href="" title="Delete the new attachment"
                       ng-click="ctrl.deleteNewAttachment(attachment)"
                       i18next="title:wiki.delete-new-attachment"></a>
                    <span>{{ attachment.name }}</span>
                    <span>[{{ attachment.size|sizeFormat }}]</span>
                </li>
                <li class="attachments-item" ng-repeat="attachment in attachments">
                    <a class="delete" data-icon="h" href="" title="Delete attachment"
                       ng-click="ctrl.deleteAttachment(attachment)"
                       i18next="title:wiki.delete-attachment"></a>
                    <a href="{{ attachment.url }}" target="_blank">{{ attachment.name }}</a>
                    <span>[{{ attachment.size|sizeFormat }}]</span>
                    <span>{{ "wiki.on-date"|i18next:{date:momentFormat(attachment.created_date, 'LLLL')} }}</span>
                </li>
            </ul>
            <input type="file" class="hidden" name="newAttachments" multiple="multiple"
                   id="attachment_file_input" gm-files="newAttachments" />
            <div class="wiki-buttons">
                <a href="" class="button button-success" ng-click="ctrl.savePage()"
                   i18next="wiki.save-button">Save</a>
                <a href="" class="button" ng-click="ctrl.discardCurrentChanges()" ng-show="page"
                   i18next="wiki.cancel-button">Cancel</a>
            </div>
        </div>
    </div>
</div>
